<#include "/layout/layout.ftl">
<#--<#import "/layout/macro.ftl" as macro>-->
<#assign css>
	<style>
		.detail{ width: 100%;}
		.detail-no-data{font-size:14px;color:#999999;text-align:center;width:100%;padding-top:2rem;}
		.detail-pic{overflow:hidden;width:100%;height:2.85rem;background: url("/assets/mobile/images/invite_banner_img.png") no-repeat center center;background-size:3.75rem 2.85rem;}
		.detail-pic h2,.detail-pic h4{width:100%;text-align: center;color: #FFFFFF;}
		.detail-pic h2{margin-top:0.42rem ;font-size: 0.26rem;}
		.detail-pic h4{margin-top:0.12rem ;font-size: 0.14rem;}
		.detail-data{background: #F9A708;width:100%;padding-top: 0.19rem;padding-bottom: 0.8rem;}

		.detail-data .detail-input-row{ padding:0 0.37rem; box-shadow: 0 2px 4px 0 rgba(130,160,246,0.05);overflow: hidden;height:0.44rem}
		.detail-data .detail-input-row input{background: #FFFFFF; padding:0 0.58rem;font-size:0.14rem;color:#333333;float: left;border: solid 0.01rem #F5F5F5;height:0.44rem;border-radius:0.22rem;box-sizing:border-box;-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */}
		#username, #password{	background-image: url("/assets/mobile/images/invite_phone.png");/*设置小图标*/
			background-size: 0.15rem 0.25rem;/*小图标的大小*/
			background-position: 0.27rem 0.08rem;/*小图标在input的位置*/
			background-repeat: no-repeat;/*背景小图标不重复*/
		}
		#password{background-size: 15px 18px;background-position: 0.27rem 0.11rem;/*小图标的大小*/background-image: url("/assets/mobile/images/invite_code.png");}
		#getCode{	width: 0.85rem;
			height: 0.44rem;
			right: 10px;
			margin-top: -0.47rem;
			display: compact;
			position: relative;
			float: right;
			color:#F5713C;
			font-size: 0.14rem;
		}

		.detail-data .detail-buttons{width:100%;margin-top: 0.35rem; height:0.43rem;}
		.detail-data .detail-buttons div{width:1.89rem; height: 100%;background: url("/assets/mobile/images/invite_btn.png") no-repeat ;background-size:cover;font-size: 0.18rem;color:#FFFFFF;text-align: center;line-height: 0.43rem;margin: 0px auto;}

		.detail-rule{width:3.45rem;margin: 0.3rem auto 0;padding: 0.65rem 0.15rem 0.2rem;background: #FEF7DE;border-radius:0.1rem;position: relative;}
		.detail-rule .detail-rule-pic{background: url("/assets/mobile/images/invite_rule_img.png") no-repeat ;background-size:cover;width:1.16rem;height:0.49rem;line-height:0.40rem;color:#FFFFFF;padding-left:0.18rem;font-size:0.16rem;position: absolute;left:-0.04rem;top:0.15rem;}
		.detail-rule p{color:rgb(51,51,51)}

		.detail-qrcode{width:1.68rem;height:1.68rem;margin: 0.68rem auto 0.2rem;}
		.detail-qrcode img{display:inline-block;width:100%;height:100%;}

		.detail .detail-buttons-new{padding:0.2rem 0.15rem; height:0.54rem;}
		.detail .detail-buttons-new button{width:100% !important;font-size:0.18rem;}
	</style>
</#assign>
<#assign js>
	<script>
		$(function() {
			var count = 60;
			$("#getCode").on("click",function () {
				var username = $("#username").val();
				if(!username || !(/^1\d{10}$/.test(username))){
					mui.toast("请填写正确手机号码");
					return;
				}
				var _this = $(this);
				$.ajax({
					type: 'POST',
					url: "/sendVerifyCode",
					data: {"mobile":username}
				}).done(
						function(response){
							console.log(response);
							if(response && response.code === "0"){
								mui.toast('验证码发送成功~');
								var timer = setInterval(function(){
									count--;
									if(count <= 0){
										_this.text("获取验证码");
										window.clearInterval(timer);
										count = 60;
									}else{
										_this.text(count+"s重新获取");
									}
								},1000);
							}else if(response.message != null){
                                mui.toast(response.message);
                            }else{
								mui.toast('发送失败，请重试');
							}
						}
				).fail(
						function(response){
							mui.toast('发送失败，请重试');
							console.log("error:"+response);
						}
				);
			});
			//下载app
			$("#download").on("click",function () {
                var iosDownloadUrl = $("#iosDownloadUrl").val();
                var androidDownloadUrl = $("#androidDownloadUrl").val();
				var url = ""
				//mui.toast('下载中');
				//判断客户端
                var u = navigator.userAgent, app = navigator.appVersion;
                var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
                var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                if (isAndroid) {
                    //这个是安卓操作系统
					url = androidDownloadUrl;
                } else if (isIOS) {
                    //这个是ios操作系统
                    url = iosDownloadUrl;
                }
				if(url){
                    window.location.href = url;
                }else{
                    mui.toast('下载失败');
				}

			});
		});

		//提交数据
		function submitData(){
			var data = {};
			data['phone'] = $("#username").val();
            data['id'] = $("#id").val();
            data['uid'] = $("#uid").val();
			data['verifyCode'] = $("#password").val();
            if(!data['id']){
                mui.toast("活动不存在");
                return;
            }
			if(!data['phone'] || !(/^1\d{10}$/.test(data['phone']))){
				mui.toast("请填写正确手机号码");
				return;
			}
			if(!data['verifyCode'] || !(/^\d{4}$/.test(data['verifyCode']))){
				mui.toast("请填写正确验证码");
				return;
			}
			$.ajax({
				type: 'POST',
				url: "/checkValidCode",
				data: data
			}).done(
					function(response){
						console.log(response);
						if(response && response.code === "0"){
						    $(".is_hide").hide();
							mui.toast('领券成功，去下载【阿四服务】app使用吧');
						}else if(response.message != null){
                            mui.toast(response.message);
						}else{
							//$(this).removeAttr("disable");//禁用按钮
							mui.toast('操作失败，请重试');
						}
					}
			).fail(
					function(response){
						mui.toast('操作失败，请重试');
						console.log("error:"+response);
					}
			);
		}
	</script>
</#assign>
<@layout title="邀请有奖" active="invite">
<!-- Content Header (Page header) -->

<!-- Main content -->
	<input type="hidden" name="uid" value="${uid!}" id="uid"/>
	<input type="hidden" name="id" value="${invite.id!}" id="id"/>
	<input type="hidden" name="iosDownloadUrl" value="${iosDownloadUrl!}" id="iosDownloadUrl"/>
	<input type="hidden" name="androidDownloadUrl" value="${androidDownloadUrl!}" id="androidDownloadUrl"/>
	<div class="contaniner fixed-cont">
		<section class="detail">
			<div class="detail-pic">
				<h2>${invite.title!}</h2>
				<h4>${invite.subTitle!}</h4>
			</div>
			<div class="detail-data">
				<div class="detail-input-row is_hide" >
					<input type="text" name="username" id="username" placeholder="请输入手机号" required/>
				</div>
				<div class="detail-input-row is_hide" style="margin-top:0.2rem;">
					<input type="text" name="password" id="password" placeholder="请输入验证码" required/>
					<a href="#" id="getCode">获取验证码</a>
				</div>
				<div class="detail-buttons is_hide">
					<div onclick="submitData()">立即领券</div>
				</div>
				<div class="detail-rule">
					<div class="detail-rule-pic">活动规则</div>
					<p>
						${invite.rule!}
					</p>
				</div>
				<div class="detail-qrcode" >
					<img src="${imgUrl !}" />
				</div>
				<div class="detail-buttons-new ">
					<button type="button" class="mui-btn mui-btn-detail" id="download">
						下载阿四服务app
					</button>
				</div>
			</div>
		</section>
	</div>
<!-- /.content -->
</@layout>
